<template>
  <div>
    name:{{ name }} age:{{ age }} level:{{ level }}
    <button @click="changeState">修改state</button>
    <button @click="restState">重置state</button>
  </div>
</template>

<script setup>
// 引入函数
import useUser from "@/stores/user";
import { storeToRefs } from "pinia";
// 拿到store
const userStore = useUser();
// 变成响应式的
const { name, age, level } = storeToRefs(userStore);
function changeState() {
  //1, 修改store state 掌握
  (userStore.name = "cgf"), (userStore.age = 20);
  userStore.level = 200;
  // 2，一次性修改多个状态 了解
  userStore.$patch({
    name: "zzy",
    age: 4,
  });
}
function restState() {
  // 重置state
  userStore.$reset();
}
// 3，替换state为新的对象 合并新对象 并不是替换  了解
userStore.$state = {
  name: "hahah",
};
</script>

<style>
</style>